<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="7">
        </el-col>
        <el-col :span="4">

        </el-col>
      </el-row>
      <el-table :data="orderList" border stripe style="width: 100%" height="690">
        <el-table-column type="index"></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品总数;">
                <span>{{ props.row.totalNum }}</span>
              </el-form-item>
              <el-form-item label="订单总价；">
                <span>{{ props.row.totalPrice }}元</span>
              </el-form-item>
              <el-form-item label="收货地址：">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="收货电话：">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="订单备注：">
                <span>{{ props.row.remarks }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="订单编号">
          <template slot-scope="scope">
            <el-button type="text" @click="openDrawer(scope.row)">{{ scope.row.id }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="下单人"
            prop="orderUser.name">
        </el-table-column>
        <el-table-column
            label="收货人"
            prop="name">
        </el-table-column>
        <el-table-column
            label="送货方式"
            width="180"
            prop="sendType.name">
        </el-table-column>
        <el-table-column
            label="下单时间"
            width="180"
            prop="createDate">
          <template slot-scope="scope">
            {{ scope.row.createDate | formatDate }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 编辑订单 -->
            <EditOrder style="float: left" :order-id="scope.row.id" @editSuccess="getOrderList($event)"/>
            <!-- 删除订单 -->
            <DelOrder style="float: left;margin-left: 10px" :order-id="scope.row.id"
                      @delSuccess="getOrderList($event)"/>
          </template>
        </el-table-column>
      </el-table>
      <Pageinfo :total="total" @updatePageInfo="updatePageInfo($event)"/>
    </el-card>

    <el-drawer
        :append-to-body="true"
        :visible.sync="drawerVisible"
        size="40%"
        :destroy-on-close="destroyonclose">
      <template slot="title">
        <h2>订单详情</h2>
      </template>
      <order-iteml-list :order-item-list="orderItemList"/>
      <pageinfo :total="innerTotal" @updatePageInfo="updateInnerPage"/>
    </el-drawer>

  </div>
</template>

<script>
import Pageinfo from "@/components/pageInfo/pageinfo";
import OrderItemlList from "@/components/order/orderItemList/orderItemlList";
import EditOrder from "@/components/order/editOrder/EditOrder";
import DelOrder from "@/components/order/delOrder/DelOrder";

export default {
  components: {DelOrder, EditOrder, OrderItemlList, Pageinfo},
  data() {
    return {
      destroyonclose: true,
      orderId: '',
      drawerVisible: false,
      imageServerPath: this.$GLOBAL.imgServerPath,
      orderList: [],
      orderItemList: [],
      total: 0,
      innerTotal: 0,
      pageInfo: {},
      innerPageInfo: {}
    };
  },
  methods: {
    async getOrderList() {
      const {data} = await this.axios.get("/admin/order/getAll",
          {params: {pageSize: this.pageInfo.pageSize, currentPage: this.pageInfo.currentPage}});
      this.orderList = data.data.list;
      this.total = data.data.total;
    },
    openDrawer(row) {
      this.orderId = row.id
      this.drawerVisible = true
    },
    async getOrderItemList() {
      const {data} = await this.axios.post("/order/getOrderItemByOrderId/" + this.orderId, this.innerPageInfo)
      if (data.code == 1) {
        this.orderItemList = data.data.list
        this.innerTotal = data.data.total
      } else {
        this.$notify.error({
          title: "获取失败！",
          message: "获取订单详情失败！"
        })
      }
    },
    updatePageInfo(pageInfo) {
      this.pageInfo = pageInfo
      this.getOrderList()
    },
    updateInnerPage(pageInfo) {
      this.innerPageInfo = pageInfo
      this.getOrderItemList()
    }
  }
};
</script>

<style lang="less" scoped></style>
